<!-- 
先把博客展示的样式写出来，中间使用一个数组，点击搜索时根据keyword更新数组，实现展示

貌似是因为LeiXingId是int,就算keyword是数字，拼接出的url也不能被正常使用
（或许可以类型转换，或许不支持url的拼接）

搜索博客时keyword是字符串，不知道可不可以解决
 
 -->

<template>
	<view>
		<!-- 搜索框 -->
		<view>
			<u-search height="70" placeholder="请输入关键字" v-model="keyword" 
			@custom="search(keyword)" ></u-search>
		</view>
		
		<!-- 博客展示 -->
			
		<view v-for="(item,index) in user" :key="item.userId">
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 头像 昵称 属地 关注 -->
			<view class="class01" >
				<view class="touxiang">
					<view class="u-m-r-10">
						<u-avatar :src=item.userImg size="140"></u-avatar>
					</view>
				</view>
				<view class="nichengIP">
					<view class="nicheng">
						<view class="u-font-19 u-p-b-20">{{item.userName}}</view>
					</view>
					<view class="IP">
						<view class="u-font-14 u-tips-color">IP:{{item.city}}</view>
					</view>
				</view>
			</view>
			<!-- 头像，博客主体之间的分割线 -->	
			<u-line color="#d5d5d5" /> 
			
			<!-- 博客：标题 主体 图片 -->
			<view class="allboke">
				<view class="boke">
					<view class="bokeTitle"> 
						<text class="titleText">{{item.title}}</text>
					</view>
					
					<u-line color="#d5d5d5" /> <!-- 标题与正文分割线 -->
					
					<view class="bokeBody">  <!-- 主题 -->
						<text class="u-body-item-title u-line-5">{{item.content}}</text>
					</view>
				</view>
				<image :src=item.blogImg class="boke_pic"></image>
			</view>
			
			<!-- 博客主体，点赞关注之间的分割线 -->
			<u-line color="#d5d5d5" />
			<u-gap height="20" bg-color="#e7e7e7"></u-gap>
			<u-line color="#d5d5d5" />
			
			
			
		</view>
		
		<!-- 返回顶部 -->
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		
		<!-- 底部分割线 -->
		<u-divider>没有更多了</u-divider>
			
		

		
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				scrollTop:1,
				keyword: '', //默认关键字
				searched:'false',
				user:[{
					userId:1,  //用户id
					userName:"涂某某", //用户昵称
					city:"中国", //ip属地
					userImg:'../../static/头像1.jpg', //头像路径（就这个路径，数字从0到5）
					blogImg:'../../static/风景1.jpg',//博客图片（（就这个路径，数字从1到6）
					title:"荷塘月色", //博客标题
					content:"路上只我一个人，背着手踱着。这一片天地好像是我的;我也像超出了平常旳自己，到了另一世界里。我爱热闹，也爱冷静;爱群居，也爱独处。像今晚上，一个人在这苍茫旳月下，什么都可以想，什么都可以不想，便觉是个自由的人。"
					,
					blogId:1, //博客id
					favornum:10,  //点赞数
					collectnum:5, //收藏数
					commentsnum:2, //评论数
					sign:"" //个性签名
				}]
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			
			//点击搜索，更新电影列表
			search(keyword){
				console.log(keyword);
			},

	},

	
	}
</script>

<style scoped lang="scss" >
	@import "@/common/demo.scss";
	.allboke{    			//装博客+博客图片的容器样式
		width:100vw;
		height:400rpx;
		background: #00ff00;
		display: flex;
		flex-direction: row;
		.boke{				//装博客 标题 容器的样式
			width:60vw;
			height:400rpx;
			background: #2979ff;
			.bokeTitle{		//博客标题
				width:60vw;
				height:150rpx;
				background: #ffffff;
				.titleText{		//博客标题的样式
					font-size: 20px;
				}
			}
			.bokeBody{		//博客主体
				width:60vw;
				height:250rpx;
				background: #ffffff;
				.bodyText{
					width:60vw;
					height:250rpx;
				}
			}
		}
		.boke_pic{			//博客图片
			width:40vw;
			height:400rpx;
			background: #ffffff;
		}
	}

	.class01{				//装头像,昵称,IP,关注
		width:100vw;
		height:150rpx;
		background: #ffffff;
		display:flex;
		flex-direction: row;
		
		.touxiang{			//装头像
			width:20vw;
			height:150rpx;
			background: #ffffff;
		}
		.nichengIP{			//装昵称IP
			width:50vw;
			background: #ffffff;
			.nicheng{		//昵称
				width:50vw;
				height:70rpx;
				background: #ffffff;
			}
			.IP{			//IP
				width:50vw;
				height:50rpx;
				background: #ffffff;
			}
		}
		.guanzhu{
			width:30vw;
			background: #ffffff;
		}
		
	}
	.allboke{    			//装博客+博客图片的容器样式
		width:100vw;
		height:400rpx;
		background: #00ff00;
		display: flex;
		flex-direction: row;
		.boke{				//装博客 标题 容器的样式
			width:60vw;
			height:400rpx;
			background: #2979ff;
			.bokeTitle{		//博客标题
				width:60vw;
				height:150rpx;
				background: #ffffff;
				.titleText{		//博客标题的样式
					font-size: 20px;
				}
			}
			.bokeBody{		//博客主体
				width:60vw;
				height:250rpx;
				background: #ffffff;
				.bodyText{
					width:60vw;
					height:250rpx;
				}
			}
		}
		.boke_pic{			//博客图片
			width:40vw;
			height:400rpx;
			background: #ffffff;
		}
	}

	.sticky {			//吸顶容器的样式
		width: 750rpx;
		height: 80rpx;
		background-color: #000000;
		color: #fff;
		padding: 0rpx;
	}
	.wrap {
		height: 0vh;
	}

</style>

